<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">
<!--    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/meter.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .el-input-number{
        width: 39.1%;
    }
</style>
<body>
<div id="app" style="width: 100%">
    <el-steps :active="radioIsActive">
    <!--    <el-step title="步骤 1" description="通讯接口选择"></el-step> -->
        <el-step title="步骤 1" description="绑定MODBUS串口"></el-step>
        <el-step title="步骤 2" description="设置参数"></el-step>
    </el-steps>
   <!-- <div style="height: 450px; width: 60%;padding-top: 50px;padding-bottom: 50px;padding-left: 490px" v-if="radioIsActive == 1">
        <el-form>
            <el-form-item label="连接方式: " >
                <template>
                    <el-select v-model="connectType" filterable placeholder="请选择" >
                        <el-option
                                v-for="item in connectTypes"
                                :key="item.type"
                                :label="item.connectName"
                                :value="item.type">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <div style="height: 200px; width: 20%;padding: 20px 350px;">
            <el-button type="success" @click="nextStep" plain>下一步</el-button>
        </div>
    </div> -->
    <div style="width: 60%;padding-top: 50px;padding-bottom: 50px;padding-left: 490px" v-if="radioIsActive == 1">
        <el-form label-width="172px">
            <el-form-item label="串口: " >
                <template>
                    <el-select v-model="comPort" filterable placeholder="请选择" >
                        <el-option
                                v-for="item in comPorts"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="波特率: " >
                <template>
                    <el-select v-model="baudRate" filterable placeholder="请选择" >
                        <el-option
                                v-for="item in baudRates"
                                :key="item.baudRate"
                                :label="item.baudRate"
                                :value="item.baudRate">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <div style="padding-left: 250px;">
            <el-button type="success" @click="previousStep" plain>上一步</el-button>
            <el-button type="success" @click="nextStep" plain>下一步</el-button>
        </div>
    </div>
    <div style="width: 60%;padding-top: 50px;padding-bottom: 50px;padding-left: 490px" v-if="radioIsActive == 2">

        <el-form label-width="172px">
            <el-form-item label="名称设置: " >
                <el-input v-model="meterName" ></el-input>
            </el-form-item>
            <el-form-item label="仪表型号: " >
                <template>
                    <el-select v-model="meterModel" @change="handleMeterModel" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in meterModels"
                                :key="item.model"
                                :label="item.modelName"
                                :value="item.model">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="仪表编号: " >
                <el-input v-model="modbusDeviceId" ></el-input>
            </el-form-item>
            <!--
            <el-form-item label="AL1报警值: " >
                <el-input v-model="alarm1" ></el-input>
            </el-form-item>
            <el-form-item label="AL2报警值: " >
                <el-input v-model="alarm2" ></el-input>
            </el-form-item>
            -->
            <el-form-item label="清零模式: " >
                <template>
                    <el-select v-model="clearMode" @change="handleClearMode" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in clearModes"
                                :key="item.mode"
                                :label="item.modeName"
                                :value="item.mode">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="清零执行方式: " v-if="clearMode == 1 || clearMode == 2">
                <template>
                    <el-select v-model="clearLoopType" @change="handleLoopType" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in clearLoopTypes"
                                :key="item.loopType"
                                :label="item.loopName"
                                :value="item.loopType">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="定时清零设定: " v-if="clearMode == 1 || clearMode == 2">
                <template>
                    <el-date-picker
                            @change="dateChange"
                            v-model="clearTime"
                            :type = "clearDateType"
                            :format = "clearTimeFormat"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="任意时间点">
                    </el-date-picker>
                </template>
            </el-form-item>
            <!--
            <el-form-item label="计数倍率: " >
                <el-input v-model="scaleRate" ></el-input>
            </el-form-item>
            -->
            <el-form-item label="上排显示数据格式: " v-if="meterModel == 1 || meterModel == 2">
                <template>
                    <el-select v-model="dataMode" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in dataModes"
                                :key="item.mode"
                                :label="item.modeName"
                                :value="item.mode"
                                :selected="index==0">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="上排显示值寄存器地址: " >
                <el-input v-model="modbusPos" ></el-input>
            </el-form-item>
            <p style="color:red">ST76，BCD默认1，整数默认33，浮点数默认37 。 CR76，整数默13，浮点数默认37 </p>
        </el-form>
        <div style="padding-left: 250px">
            <el-button type="success" @click="previousStep" plain>上一步</el-button>
            <el-button type="success" @click="complete" plain>完成</el-button>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            connectType:3,
            comPort:'',
            baudRate:9600,
            meterName:'',
            meterModel:1,
            modbusDeviceId:1,
            alarm1:'',
            alarm2:'',
            clearMode:0,
            clearLoopType:0,
            clearDateType:'datetime',
            clearTime:'',
            clearTimeFormat:'yyyy-MM-dd HH:mm:ss',
            scaleRate:'1',
            dataMode:0,
            modbusPos:1,
            radioIsActive:1,
            baudRates:['110','300','600','1200','2400','4800','9600','14400','19200','38400','56000','57600','115200','128000'],
            meterModels: [
                {
                    model: 1,
                    modelName: 'ST76'
                }, {
                    model: 2,
                    modelName: 'CR76'
                }
            ],
            dataModes :[
                {
                    mode : 0,
                    modeName : "请选择"
                }
            ],
            connectTypes : [
                {
                    type:3,
                    connectName:'串口'
                }
            ],
            comPorts : [
                {
                    "name":"请选择"
                }
            ],
            clearModes : [
                {
                    mode:0,
                    modeName:"不清零"
                },
                {
                    mode:1,
                    modeName:'单清零'
                },
                {
                    mode:2,
                    modeName:'双清零'
                }
            ],
            clearLoopTypes :[
                {
                    loopType:0,
                    loopName:'单次清零'
                },{
                    loopType:1,
                    loopName:'循环清零'
                }
            ]
        },
        created:function(){
            var self = this;
            self.findAllModbusType();
            self.handleMeterModel();
        },
        methods: {
            dateChange : function() {
                var self = this;
              console.log(self.clearTime);
            },
            handleLoopType : function() {
                var self = this;
                if (self.clearLoopType == 0) { // 单清零
                    self.clearTimeFormat = 'yyyy-MM-dd HH:mm:ss';
                } else if (self.clearLoopType == 1) {
                    self.clearTimeFormat = 'HH:mm:ss';
                }
                console.log(self.clearTimeFormat);
            },
            handleMeterModel : function() {
                var self = this;
                if (self.meterModel == 1) {
                    console.log("ST76 choose");
                    self.dataModes = [
                        {
                            mode: 1,
                            modeName: 'BCD'
                        }, {
                            mode: 2,
                            modeName: '32位整数'
                        }, {
                            mode: 3,
                            modeName: '32位浮点数'
                        }
                    ];
                    if (self.dataMode == 0) {
                        self.dataMode = 1;
                    }
                } else if (self.meterModel == 2) {
                    self.dataModes = [
                        {
                            mode: 2,
                            modeName: '32位整数'
                        }, {
                            mode: 3,
                            modeName: '32位浮点数'
                        }
                    ];
                    if (self.dataMode == 1) {
                        self.dataMode = 2;
                    }
                } else {

                }
            },
            handleClearMode : function() {
                var self = this;
                if (self.clearMode == 1) { // 单清零
                } else if (self.clearMode == 2) {
                } else {
                    self.clearMode = 0;
                }

            },
            getSerialPortMeter:function() {
                var self = this;

                console.log(self.typePort.split("_")[1])
                axios.post('http://localhost:8032/device/getSerialPortMeter',{"port":self.typePort.split("_")[1]}).then(function (res) {
                    if (res.data.code == true) {
                        console.log("获取成功");
                        console.log(Number(res.data.data))
                        console.log(Number(self.intervalTime))
                        self.time = Number(res.data.data) * (Number(self.intervalTime))
                    } else {
                        console.log("获取失败");
                        self.$notify.error({
                            title: '温馨提示',
                            message: '仪表个数获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            findAllModbusType: function() {
                var self = this;
                axios.post('http://localhost:8032/device/findAllModbusType').then(function (res) {
                    if (res.data.code == true) {
                        console.log("通讯接口获取成功");
                        self.comPorts = res.data.data
                    } else {
                        console.log("通讯接口获取失败");
                        self.$notify.error({
                            title: '温馨提示',
                            message: '串口获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                })

            },
            nextStep:function () {
                var self = this;
                if (self.connectType == 0) {
                    self.$message({
                        type: 'warning',
                        message: '请选择通讯接口',
                        duration: 10000,
                        showClose: true,
                    });
                    return ;
                }
                if (this.radioIsActive == 2 || this.radioIsActive == 3) {
                    if (self.comPort == undefined || self.comPort == null || self.comPort == '') {
                        self.$message({
                            type: 'warning',
                            message: '请绑定MODBUS串口',
                            duration: 10000,
                            showClose: true,
                        });
                        return ;
                    }
                    if (this.radioIsActive == 2) {
                        self.$confirm("确定串口已连接完好? 否则会导致数据读取失败...","温馨提示",{
                            confirmButtonText:'确定',
                            cancelButtonText:'取消',
                            type:'warning'
                        }).then(function () {
                            self.radioIsActive = 3;
                        }).catch(function () {
                            self.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        })
                    } else {
                        // 数据校验
                        if (self.meterModel == 0) {
                            self.$message({
                                type: 'warning',
                                message: '请选择设备型号',
                                duration: 10000,
                                showClose: true,
                            })
                            return ;
                        }
                        if (self.modbusDeviceId > 32 || self.modbusDeviceId < 1) {
                            self.$message({
                                type: 'warning',
                                message: '设备编号超出范围，范围为1-32',
                                duration: 10000,
                                showClose: true,
                            })
                            return ;
                        }
                        if (self.meterName == undefined || self.meterName == null || self.meterName == '') {
                            self.$message({
                                type: 'warning',
                                message: '请输入名称设置',
                                duration: 10000,
                                showClose: true,
                            })
                            return ;
                        }
                        if (self.modbusPos == undefined || self.modbusPos == null || self.modbusPos == 0) {
                            self.$message({
                                type: 'warning',
                                message: '请输入寄存器读取地址',
                                duration: 10000,
                                showClose: true,
                            });
                            return ;
                        }
                        if (self.dataMode == 0) {
                            self.$message({
                                type: 'warning',
                                message: '请选择第一排显示数据格式',
                                duration: 10000,
                                showClose: true,
                            });
                            return ;
                        }
                    }


                } else if(this.radioIsActive == 3){
                    this.radioIsActive = 4
                } else {
                    var self = this;

                    this.radioIsActive = 2;
                }
            },
            complete:function () {
                var self = this;
                axios.post(
                    'http://localhost:8032/device/addDevices',
                    {
                        "comPort":self.comPort,
                        "connectType":self.connectType,
                        "baudRate":9600,
                        "meterName":self.meterName,
                        "meterModel":self.meterModel,
                        "modbusDeviceId":self.modbusDeviceId,
                        "alarm1":self.alarm1,
                        "alarm2":self.alarm2,
                        "clearMode":self.clearMode,
                        "clearLoopType":self.clearLoopType,
                        "clearTime":self.clearTime,
                        "scaleRate":self.scaleRate,
                        "dataMode":self.dataMode,
                        "modbusPos":self.modbusPos
                    }
                ).then(function (res) {
                    if (res.data.code == true) {
                        self.$message({
                            type: 'info',
                            duration: 3000,
                            message: '添加成功',
                            onClose: function () {
                                window.parent.location.href="index.html";
                            }
                        });
                    } else {
                        console.log("添加失败");
                        var errMsg = "添加设备失败，请稍后再试";
                        if (res.data.message) {
                            errMsg = res.data.message;
                        }
                        self.$notify.error({
                            title: '温馨提示',
                            message: errMsg
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            continuSetup:function () {
                window.location.href = "meter.html";
            },
            previousStep:function () {
                if (this.radioIsActive == 2) {
                    this.radioIsActive = 1;
                } else {
                    this.radioIsActive = 2;
                }
            },
        }
    })
</script>

</html>